<template>
  <div>
    <a-form
      layout="inline"
      @submit.prevent="onSubmit"
      :form="form"
      class="search-list"
    >
      <div class="option-box">
        <a-form-item class="item" label="地区">
          <vue-region
            v-decorator="[
              'region',
              {
                initialValue: payload.province
                  ? [String(payload.province), String(payload.city)]
                  : []
              }
            ]"
          ></vue-region>
        </a-form-item>
      </div>
      <!-- 按钮 -->
      <div class="action-box">
        <a-button htmlType="submit" type="primary">查询</a-button>
        <a-button @click="reset">重置</a-button>
      </div>
    </a-form>
  </div>
</template>

<script>
export default {
  props: {
    payload: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      form: this.$form.createForm(this)
    };
  },
  methods: {
    onSubmit() {
      this.form.validateFields((err, data) => {
        const v = { ...data };
        v.page = 1;
        const { region } = v;
        if (region) {
          v.province = region[0];
          v.city = region[1];
          delete v.region;
        }
        this.$parent.saveParams(v);
      });
    },
    reset() {
      const payload = {
        page: 1
      };
      Object.keys(this.payload).forEach(key => {
        if (!["page", "per_page"].includes(key)) {
          payload[key] = "";
        }
      });
      this.$parent.saveParams(payload);
    }
  }
};
</script>

<style lang="less" scoped>
.search-list {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.item {
  margin: 10px 30px 10px 0;
}
</style>
